<template name="appNotariseStart">

<div class="small ui modal" id="lowOtsKeyWarning">
  <div class="header">OTS Keys Running Low!</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          Warning: Your OTS Keys are running low.
        </div>
        <p>You only have <strong>{{otsKeysRemaining}}</strong> OTS Keys remaining. When you have used all of these, you will no longer be able to send QRL or Tokens from this wallet.</p>
        <p>It is strongly suggested that you create a new wallet, and move all your QRL and Tokens to it to ensure you do not lose access to your funds.</p>
        <p><a href="https://docs.theqrl.org/developers/ots/" target="_blank">Click here to learn what OTS Keys are.</a></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button red">Okay</div>
  </div>
</div>

<div class="small ui modal" id="invalidNodeResponse">
  <div class="header">WARNING - Bad Response</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          WARNING - The node you've requested this transaction from replied with bad data that doesn't match your intended transaction parameters.
          <br /><br />
          This transaction has been cancelled automatically to protect your funds.
          <br /><br />
          Please report this issue through a Github issue, or directly to the QRL Team via email: info@theqrl.org
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button red">Okay</div>
  </div>
</div>

<div class="small ui modal" id="otsKeyReuseDetected">
  <div class="header">OTS Key Reuse</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          You have attempted to create a transaction using an OTS Key Index that has previously been used on the QRL Network.
          <br /><br />
          Please recreate your transaction using a unique OTS Key Index.
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">Okay</div>
  </div>
</div>

<div class="small ui modal" id="ledgerOtsKeyReuseDetected">
  <div class="header">OTS Key Reuse</div>
  <div class="content">
    <div class="ui warning icon message">
      <i class="warning icon"></i>
      <div class="content">
        <div class="header">
          You have attempted to create a transaction using an OTS Key Index that has previously been used on the QRL Network.
          <br /><br />
          You need to update your Ledgers XMSS Index in Tools -> Set XMSS Index.
        </div>
        <p></p>
      </div>
    </div>
  </div>
  <div class="actions">
    <div class="ui approve green button">Okay</div>
  </div>
</div>

<h4 class="ui header pageHeader">
  <i class="edit icon"></i>
  <div class="content">
    Notarise Document
  </div>
</h4>

<div class="ui left aligned segment pageSegment" id="messageCreateForm">

  <form id="notariseForm" class="ui form">

    <h4 class="ui dividing header">Notary</h4>

    <h4 id="transferFormFromAddress" class="breakable"><a class="ui purple label">From Address</a> {{transferFrom.address}}</h4>
    <h4 class="breakable"><a class="ui yellow label">Quanta Balance</a> {{transferFrom.balance}}</h4>

    <br />
    <div class="field">
      This function will save a hash of the selected document permanently on the QRL network, and will be associated with your QRL address. You can share the resultant transaction hash with someone to prove you have notarised the document.
    </div>

    <h4 class="ui horizontal divider header">
      <i class="edit icon"></i>
      Document Notarisation
    </h4>
    <input type="hidden" id="message" autocomplete="off">

    <div class="field">
      <label>Select Document</label>
      <input type="file" id="notaryDocument" accept="text/json" name="notaryDocument[]" />
    </div>

    <div class="field">
      <label>Notarisation Hash Function</label>
      <select id="hashFunction" class="ui compact selection dropdown">
        <option value="SHA256">SHA256</option>
      </select>
    </div>

    <div class="field">
      <label>Additional Text <i id="additional_text_max_length">(Max Length: 45)</i></label>
      <input type="text" id="additional_text" autocomplete="off">
    </div>

    <h4 class="ui horizontal divider header">
      <i class="send icon"></i>
      Transaction
    </h4>

    <div class="field">
      <label>Notarisation Fee (In Quanta)</label>
      <input type="text" id="fee" value="0.25" autocomplete="off">
    </div>

    <div class="field">
      <label>OTS Key Index</label>
      <input type="text" id="otsKey" placeholder="0" value="{{otsKeyEstimate}}" autocomplete="off" {{ledgerWalletDisabled}}>
    </div>

    <div class="field">
      <div class="ui warning icon message" style="display: inline-flex;">
        <i class="warning icon"></i>
        <div class="content">
          <div class="header">
            OTS Key Index Warning
          </div>
          {{#if isLedgerWallet}}
          <p>The <strong>OTS (One Time Signature)</strong> Key Index in the field above is based on data provided by your Ledger Device. You should <b>never</b> re-use the same OTS Key for more than 1 transaction. As you are using a Ledger Device, you can rest assured your Device will keep track of all used signatures for you. As a result, you cannot change the OTS Key that will be used to sign this transaction as the Ledger Device will automatically use the next one in line.</p>
          {{else}}
          <p>The <strong>OTS (One Time Signature)</strong> Key Index in the field above is estimated based on data provided by the QRL node you're connected to. You should <b>never</b> re-use the same OTS Key for more than 1 transaction. If you are unsure, it is safest to write down all used OTS Key Indexes, and store them in a safe place.</p>
          {{/if}}
        </div>
      </div>
    </div>

    <div class="field">
      <button id="createMessage" class="ui huge primary button red" style="float: left;">Notarise Document</button>
      <br />
    </div>

    <div class="field">
      <br />
      <div id="generating" style="display: none;" class="ui icon message">
        <i class="notched circle loading icon"></i>
        <div class="content">
          <div class="header">
            Just one moment
          </div>
          <p>Notarising document...</p>
        </div>
      </div>
    </div>   

  </form>
</div>

<div id="documentNotarisationFailed" class="ui red segment pageSegment" style="display: none;">
  <h4>Document Notarisation Failed</h4>
  <p style="word-wrap: break-word; word-break: break-all;">Error: {{documentNotarisationError}}</p>
</div>

</template>